<template>
  <div class="biaotou">
    <ul>
        <li class="li" v-for="i in list" :key="i.idx" @mouseover="dianji_xuanze(i)" >
            {{i.name}}
        </li>
        <li class="zi"></li>
    </ul>
  </div>
</template>

<script>
export default {
  name: "biaotou",
  data() {
    return {
        list:[
            {
                name:'111',
                idx:'1'
            },
            {
                name:'222',
                idx:'2'
            },
            {
                name:'333',
                idx:'3'
            },
            {
                name:'444',
                idx:'4'
            },
        ],
        dangqian_num:'1'
    };
  },
  created() {
      this.shuzu_quchong()
      this.jichu()
  },
  methods: {
        dianji_xuanze(i){
            this.dangqian_num=i.idx
            console.log(i)
            $('.li').siblings('.zi').stop(true, false).animate({ marginLeft: (Number(i.idx)-1 )* (100) }, 300);//实现下划线滑动
        },
        shuzu_quchong(){
            let a=[]
            let b=[],
            c= [
                {id: 1, name: '周瑜1',lang:100},
                {id: 3, name: '王昭君1',lang:400},
                {id: 2, name: '李白1',lang:151},
                {id: 1, name: '周瑜2',lang:101},
                {id: 2, name: '李白2',lang:150},
                {id: 3, name: '王昭君2',lang:300}
            ];
            function sortByKey(array,key){
                return array.sort(function(a,b){
                    var x = a[key];
                    var y = b[key];
                    return((x>y)?-1:((x<y)?1:0));//这边  y-x  也能实现数字倒序
                })
            }
            sortByKey(c,'lang')
            for(let i=0;i<c.length;i++){
                if(!b[c[i].id]){
                    a.push(c[i])
                    b[c[i].id]=true
                }
            }
            console.log(a)
        },
        jichu(){
            var target = {
                name: 'poetries'
            };
            var logHandler = {
                
                set: function(target, key, value) {
                    console.log(`${key} 被设置为 ${value}`);
                    target[key] = value;
                    debugger
                    return true
                },
                get: function(target, key,value) {
                    console.log(target)
                    console.log(value)
                    console.log(`${key} 被读取`);
                    return target[key];
                },
            }
            var targetWithLog = new Proxy(target, logHandler);
            
            targetWithLog.name; // 控制台输出：name 被读取
            targetWithLog.name = 'others'; // 控制台输出：name 被设置为 others
            debugger
            
            console.log(target.name); // 控制台输出: others
        }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
ul{
    display: flex;
    align-items: center;
    position: relative;
}
li{
    width:100px;
    height:40px;
    line-height: 40px;
    text-align: center;
    cursor: pointer;
}
.li{
    z-index: 99999;
}
.zi{
    position: absolute;
    width:100px;
    height:40px;
    background-color: red;
}
</style>
